<template>
    <n-tabs default-value="群聊列表" justify-content="space-evenly" type="line">
        <n-tab-pane name="群聊列表" tab="群聊列表">
            <div class="f-box">
                <draggable v-model="myGroupList" @start="onStart" @end="onEnd">
                    <transition-group>
                        <div class="friend-item" v-for="item in myGroupList" :key="item.id">
                            <img v-if="item.img" class="user-avatar" :src="item.img"
                                 alt="author"/>
                            <img v-else class="user-avatar" src="@/assets/images/user/default-author.png"
                                 alt="author"/>
                            <div class="friend-name">
                                <n-ellipsis style="max-width: 4.5rem">
                                    {{ item.name }}
                                    <template #tooltip>
                                        <div style="text-align: center">
                                            {{ item.name }}
                                        </div>
                                    </template>
                                </n-ellipsis>
                            </div>
                            <div class="friend-user-num">
                                <svg-icon icon-class="friend" size="0.3rem"></svg-icon>
                                {{ item.userNumber }}
                            </div>
                            <div class="friend-reason">
                                <span style="font-weight: bold;">群号：</span>{{ item.groupNumber }}
                            </div>
                            <span class="friend-time">
                                        建群时间：{{ formatDate(item.createTime) }}
                                    </span>
                            <div class="button-box">
                                <n-button style="width: 1rem" size="tiny" type="info">
                                    <span style="color: var(--text-color)">发消息</span>
                                </n-button>
                                <n-button style="width: 1rem" size="tiny" type="success"
                                          @click="handelGroupChat(item.id)">
                                    <span style="color: var(--text-color)">查看</span>
                                </n-button>
                            </div>
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </n-tab-pane>
        <n-tab-pane name="我的群聊" tab="我的群聊">
            <div class="ir-box">
                <draggable v-model="myGroupList" @start="onStart" @end="onEnd">
                    <transition-group>
                        <div class="i-item" v-for="item in myGroupList" :key="item.id">
                            <img v-if="item.img" class="user-avatar" :src="item.img"
                                 alt="author"/>
                            <img v-else class="user-avatar" src="@/assets/images/user/default-author.png"
                                 alt="author"/>
                            <div class="i-name">
                                <n-ellipsis style="max-width: 3rem">
                                    {{ item.name }}
                                    <template #tooltip>
                                        <div style="text-align: center">
                                            {{ item.name }}
                                        </div>
                                    </template>
                                </n-ellipsis>
                            </div>
                            <div class="i-user-num">
                                <svg-icon icon-class="friend" size="0.3rem"></svg-icon>
                                {{ item.userNumber }}
                            </div>
                            <div class="i-reason">
                                <span style="font-weight: bold">群号：</span>{{ item.groupNumber }}
                            </div>
                            <span class="i-time">
                                        建群时间：{{ formatDate(item.createTime) }}
                                    </span>
                            <div class="button-box">
                                <n-button size="tiny" type="error">
                                    <span style="color: var(--text-color)">管理</span>
                                </n-button>
                            </div>
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </n-tab-pane>
    </n-tabs>
</template>

<script setup lang="ts">
import {formatDate} from "@/utils/date";
import useStore from "@/store";
import {GroupVO} from "@/api/group/types";
import {getJoinGList, getMyGList} from "@/api/group";

const {user, chat} = useStore();

const myGroupList = ref([] as GroupVO[])
const joinGroupList = ref([] as GroupVO[])
const data = reactive({
    drag: false,
})

const {drag} = toRefs(data)
const onStart = () => {
    drag.value = true;
}
const onEnd = () => {
    drag.value = false;
}

/**
 * 开始群聊
 */
const handelGroupChat = (groupId: number) => {
    chat.chatType = 2;
    // 本地存储里面去查找相应群聊消息,赋值给当前会话
}

const getMyGroup = () => {
    getMyGList().then(({data}) => {
        if (data.flag) {
            myGroupList.value = data.data;
        }
    })
}

const getJoinGroup = () => {
    getJoinGList().then(({data}) => {
        if (data.flag) {
            joinGroupList.value = data.data;
        }
    })
}

onMounted(() => {
    if (user.id !== undefined) {
        getMyGroup();
        getJoinGroup();
    }
})
</script>

<style scoped lang="scss">
.f-box {
  width: 100%;

  .friend-item {
    position: relative;
    width: 100%;
    padding: 0.2rem;
    border-radius: 0.2rem;
    box-shadow: 0 0 0.1rem var(--box-shadow);
    margin-top: 0.2rem;
    color: var(--main-2-h8);

    &:hover {
      box-shadow: inset 0 0 0.1rem var(--box-shadow-c);
    }

    .user-avatar {
      width: 0.8rem;
      height: 0.8rem;
    }

    .friend-name {
      width: 4.5rem;
      font-size: 1.2em;
      font-weight: bold;
      position: absolute;
      top: 0.35rem;
      left: 1.2rem;
      color: var(--main-1);
    }

    .friend-user-num {
      position: absolute;
      top: 1.2rem;
      right: 0.2rem;
    }

    .friend-time {
      position: absolute;
      top: 0;
      right: 0.2rem;
      text-align: right;
    }

    .button-box {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 0.2rem;
      gap: 0.3rem;
    }
  }
}

.ir-box {
  width: 100%;
  margin: 0 auto;

  .i-item {
    display: inline-block;
    width: 48%;
    position: relative;
    padding: 0.2rem;
    border-radius: 0.2rem;
    box-shadow: inset 0 0 0.1rem var(--box-shadow);
    margin: 1%;
    vertical-align: middle;
    color: var(--main-2-h8);

    &:hover {
      box-shadow: 0 0 0.1rem var(--box-shadow-c);
    }

    .user-avatar {
      width: 0.8rem;
      height: 0.8rem;
    }

    .i-name {
      position: absolute;
      top: 0.3rem;
      left: 1.2rem;
      font-weight: bold;
      font-size: 1.2em;
      color: var(--main-1);
    }

    .i-user-num {
      position: absolute;
      bottom: 0.15rem;
      left: 0.2rem;
    }

    .button-box {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 0.2rem;
      gap: 0.2rem;
    }
  }
}
</style>